<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/fore/foreHeader.jsp" %>
<link rel="stylesheet" href="css/forefootstyle.css">
<link rel="stylesheet" href="css/lunbo/animate-custom.css">
<link rel="stylesheet" href="css/lunbo/edslider.css">
<link rel="stylesheet" href="css/lunbo/styles.css">
<link rel="stylesheet" href="css/index.css">

<!-- 导航栏 -->
	<%@include file="foreNav.jsp" %>
	<!-- 轮播图 -->
	
	<div class="container1">
		<ul class="mySlideshow">
		
			<c:forEach items="${showIndexImages}" var="showIndexImage" varStatus="st">
				<c:if test="${st.count<=5}">
	   				<li class="first" style="background:url('virtual_imgBig?pictureId=${showIndexImage.imagebig_url}') ;-moz-background-size:100% 500px; /* 老版本的 Firefox */ background-size:100% 500px;">
	   					<a target='_Blank' style="display:block;width:100%;height:100%"href="palytvPage?id=${showIndexImage.tv_id}"></a>
	   				</li>
	   				</c:if>
		    </c:forEach>
		</ul>
	</div>
	<script src="js/jquery.edslider.js"></script>
	<script>
		$(document).ready(function(){
			//Call plugin
			$('.mySlideshow').edslider({
				width : '100%',
				height: 500
			});
		});
	</script>
	
	<!-- 悬浮框区域 -->
	 <div id="s3">
	 	<div class="s4">
	 		<div class="hangTable">
	 			<div style="width:500px;float:left;">
	 				<table>
	 			<tr>
	 				<c:forEach items="${mainTypes}" var="mainType" varStatus="st">
	 					<c:if test="${st.count<=4}">
	 					<td>
		 				<a class="top-link" style="margin:0px 30px;" href="listCategoryPage?id=${mainType.id}">${mainType.descri}</a>
		 				</td>
	 					</c:if>
	 				</c:forEach>
	 			</tr>
	 			<tr>
	 				<c:forEach items="${mainTypes}" var="mainType" varStatus="st">
	 					<c:if test="${4<st.count&&st.count<=8}">
	 					<td>
		 				<a class="top-link" style="margin:0px 30px;" href="listCategoryPage?id=${mainType.id}">${mainType.descri}</a>
		 					</td>
	 					</c:if>
	 				</c:forEach>
	 			</tr>
	 					</table>
	 			</div>
	 			<div style="width:450px;float:left;border-left: solid #C5C5C5 1px;border-right: solid #C5C5C5 1px;">
	 				<table style="margin-left:40px;">
	 				<tr>
	 				<td><a class="top-link" style="margin:0px 30px;" href="javaScript: alert('敬请期待')">不得文学</a></td>
	 				<td><a class="top-link" style="margin:0px 30px;" href="javaScript: alert('敬请期待')">不得音乐</a></td>
	 				</tr>
	 				<tr>
	 				<td><a class="top-link" style="margin:0px 30px;" href="javaScript: alert('敬请期待')">不得影院</a></td>
	 				<td><a class="top-link" style="margin:0px 30px;" href="javaScript: alert('敬请期待')">不得直播</a></td>
	 				</tr>
	 				</table>
	 			</div>
	 			
	 			<div style="float:left;">
	 				<table>
	 				<tr>
	 				<td><span class="hangIcon"><img src="img/icon1.png" width="40px"><br><p>会员中心</p></span></td>
	 				<td><span class="hangIcon"><img src="img/icon2.png" width="40px"><br><p>观影券</p></span></td>
	 				<td><span class="hangIcon"><img src="img/icon3.png" width="40px"><br><p>最近热议</p></span></td>
	 				<td><span class="hangIcon"><img src="img/icon4.png" width="40px"><br><p>客服小杜</p></span></td>
	 				</tr>
	 				</table>
	 			</div>
	 		</div>
	 	</div>
	 </div>
 <div style="margin-top:40px;"></div>
<!--  广告区域 -->
 <div style="position:fixed;width:300px;height:300px;bottom:0px;right:0px;">
 <div>
  <span id="advClose" style="position:relative;left:258px;cursor:pointer;">
 	广告X
 </span>
 </div>

 <a target="Blank" href="http://tky.toketec.com"><img id="advLink" src="adv/adv1.png" style="width:100%;height:93%;object-fit: fill;border:2px solid red;"></a>
 </div>
 
<!--  片源列表区域 -->
  <c:forEach items="${showIndexs}" var="showIndex" varStatus="st">
 	<div  class="tvSmallImg">
 		<!-- 主分类显示的区域 -->
	 	<div  class="tvLoad"style="float:left;width:1180px;margin:30px 0px 5px 0px;" load="${showIndex.maintype}">
 			 <div style="width:1180px;">
 				<font  size="+2" color="#009CFF">▌</font><a class="top-link" style="margin:0px 10px;" href="listCategoryPage?id=${showIndex.maintype}"><font class='font-title' size="+2">${showIndex.mainType.descri}</font></a>
		 		<!-- 视频链接区域 -->
		 		<span class="tvUrl">
		 		</span>
		 		<a class="top-link" style="margin:0px 10px;" href="listCategoryPage?id=${showIndex.maintype}">更多>></a>
 			</div>
 			<table style="border-collapse:separate;border-spacing:32px 22px;position:relative;left:-32px;">
 			</table>
		 </div>
		<!--  主分类下推荐子分类的区域 -->
		 <div style="width:220px;float:right;margin:30px 0px">
		 	
		 </div>
	 </div>
 </c:forEach>
<%@include file="../include/fore/foreFooter.jsp" %> 
 
<script>

$(function(){
	//加载影片
	$(".tvLoad").each(function(){
		var tvLoad = this;
		var id = $(tvLoad).attr("load");
		$.ajax({
			url:"fore_index_loadCategory?id="+id,
			success:function(data){
				var mainType = data;
				//加载url链接
				var tvsUrl = mainType.tvsUrl;
				var htmlStr = "";
				for(var i=0;i<tvsUrl.length;i++){
					htmlStr+="<a class='top-link' target='_Blank' style='margin:0px 10px;' href='palytvPage?id="+tvsUrl[i].id+"'>"+tvsUrl[i].name+"</a>";
				}
				$(tvLoad).children().eq(0).children().eq(2).html(htmlStr);
				
				
				//加载图片
				var tvsImage = mainType.tvsImage;
				var htmlStr1 = "<tr>";
				
				if(tvsImage.length>0&&tvsImage.length<=5){
					for(var i = 0;i<tvsImage.length;i++){
						if(tvsImage[i].grades==null){
							tvsImage[i].grades="未评分";
						}
						//对影片详情进行裁剪
						var contentStr = tvsImage[i].descri;
						contentStr = contentStr.substring(0,11)+"...";
						htmlStr1 += "<td class='tvtd'><span ><a id='choose_img'   target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>";
						htmlStr1 +="<img  width='180px' style='position:relative;'height='240px' class='img-rounded' src='virtual_img/"+tvsImage[i].img_url+"'></a><br>";
						htmlStr1 +="<a class='top-link' target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>"+tvsImage[i].name+"</a><font color='red' class='pull-right'>"+tvsImage[i].grades+"</font><br>";
						htmlStr1 +="<font color='#989898' title='"+tvsImage[i].descri+"'>"+contentStr+"</font></span></td>";
					}
				}else if(tvsImage.length>5){
					for(var i = 0;i<5;i++){
						if(tvsImage[i].grades==null){
							tvsImage[i].grades="未评分";
						}
						//对影片详情进行裁剪
						var contentStr = tvsImage[i].descri;
						contentStr = contentStr.substring(0,11)+"...";
						htmlStr1 += "<td class='tvtd'><span ><a id='choose_img'   target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>";
						htmlStr1 +="<img  width='180px' height='240px' class='img-rounded' src='virtual_img/"+tvsImage[i].img_url+"'></a><br>";
						htmlStr1 +="<a class='top-link' target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>"+tvsImage[i].name+"</a><font color='red' class='pull-right'>"+tvsImage[i].grades+"</font><br>";
						htmlStr1 +="<font color='#989898' title='"+tvsImage[i].descri+"'>"+contentStr+"</font></span></td>";
					}
					htmlStr1 += "</tr>";
					htmlStr1 += "<tr>";
					for(var i = 5;i<tvsImage.length;i++){
						if(tvsImage[i].grades==null){
							tvsImage[i].grades="未评分";
						}
						//对影片详情进行裁剪
						var contentStr = tvsImage[i].descri;
						contentStr = contentStr.substring(0,11)+"...";
						htmlStr1 += "<td class='tvtd'><span ><a id='choose_img'   target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>";
						htmlStr1 +="<img  width='180px' height='240px' class='img-rounded' src='virtual_img/"+tvsImage[i].img_url+"'></a><br>";
						htmlStr1 +="<a class='top-link' target='_Blank' href='palytvPage?id="+tvsImage[i].id+"'>"+tvsImage[i].name+"</a><font color='red' class='pull-right'>"+tvsImage[i].grades+"</font><br>";
						htmlStr1 +="<font color='#989898' title='"+tvsImage[i].descri+"'>"+contentStr+"</font></span></td>";
					}
				}
				$(tvLoad).children().eq(1).append(htmlStr1+"</tr>");
				
				
				//加载随机子分类
				var otherType = mainType.otherType;
				var tvsOtherType = mainType.tvsOtherType;
				var htmlStr3 = "<font  size='+2' color='#009CFF'>▌</font><a class='top-link' style='margin:0px 10px;' target='_Blank' href='listOtherCategoryPage?id="+otherType.id+"'><font class='font-title' size='+2'>"+otherType.descri+"</font></a>";
				if(tvsOtherType.length!=0){
					htmlStr3 +="<table>"
					for(var i=0;i<tvsOtherType.length;i++){
						htmlStr3+="<tr>";
							if(i<=2){
								htmlStr3+="<td><span class='badge badge-primary' style='background-color:#1A9EFF;'>"+(i+1)+"</span></td>";
							}else{
								htmlStr3+="<td><span class='badge' style='background-color:grey'>"+(i+1)+"</span></td>";
							}
						htmlStr3+="<td><a class='top-link' style='margin:0px 10px;' target='_Blank' href='palytvPage?id="+tvsOtherType[i].id+"'>"+tvsOtherType[i].name+"</a></td>";
						htmlStr3+="<td>"+getDateDetail(tvsOtherType[i].createdate)+"</td>";
						htmlStr3+="</tr>";
					}
					htmlStr3+="</table>";
				}else{
					htmlStr3+="<div>此分类下暂无片源</div>";
				}
				$(tvLoad).siblings().eq(0).html(htmlStr3);
			}
		});
	});
	
});

$("body").on("mouseover",".tvtd",function(){
	$(this).addClass("tvselect");
});

$("body").on("mouseout",".tvtd",function(){
	$(this).removeClass("tvselect");
});

$("#advClose").click(function(){
	$(this).parent().parent().hide();
});
console.log(document.cookie);
</script>
